import 'package:flutter/material.dart';
import 'package:flutter_demo/widgets/textWidget.dart';
import 'package:flutter_demo/models/goodsItem.dart';

class MGridGoods extends StatelessWidget {
  final int crossAxisCount;
  final double crossAxisSpacing;
  final double childAspectRatio;

  final List<GoodsItem> items;

  MGridGoods({
    @required this.items,
    this.crossAxisCount = 3,
    this.crossAxisSpacing = 10.0,
    this.childAspectRatio = 0.5,
  }) : assert(items != null);

  @override
  Widget build(BuildContext context) {
    double _screenWidth = MediaQuery.of(context).size.width;
    double _itemWidth =
        (_screenWidth - crossAxisSpacing * (crossAxisCount + 2)) /
            crossAxisCount;

    return Padding(
      padding: EdgeInsets.symmetric(horizontal: crossAxisSpacing),
      child: GridView.count(
        shrinkWrap: true,
        physics: ClampingScrollPhysics(),
        crossAxisCount: crossAxisCount,
        crossAxisSpacing: crossAxisSpacing,
        mainAxisSpacing: crossAxisSpacing,
        childAspectRatio: childAspectRatio,
        primary: false,
        children: items.map((GoodsItem item) {
          return Container(
            child: MGoodsWidget(
              width: _itemWidth,
              item: item,
            ),
          );
        }).toList(),
      ),
    );
  }
}

class MGoodsWidget extends StatelessWidget {
  final double width;
  final GoodsItem item;

  MGoodsWidget({this.width, this.item});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Image.network(
            item.imageScr,
            width: width,
            height: width,
            fit: BoxFit.cover,
          ),
          Container(height: 10.0),
          MText(item.title),
          item.detail == null
              ? null
              : MText(item.detail, fontSize: 12.0, color: Colors.grey),
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              MText("￥", fontSize: 12.0, color: Colors.red),
              MText("${item.freePrice/100}", fontSize: 16.0, color: Colors.red),
              MText("￥${item.price/100}", fontSize: 14.0, color: Colors.grey),
            ],
          ),
        ],
      ),
    );
  }
}
